<script lang="ts" setup>

import {onMounted, reactive, ref, type UnwrapRef} from 'vue';
import {useRoute} from "vue-router";
import {getVerificationDetailAPI, updateVerificationAPI} from "@/apis/verification.ts";
import dayjs from "dayjs";
import {message} from "ant-design-vue";
import router from "@/router";
import {addNewAPI} from "@/apis/new.ts";
import {useInfoStore} from "@/store/user/user.ts";
import {updateJobseekerVerifiedAPI} from "@/apis/jobseeker.ts";

//表单数据
interface FormState {
  verificationId: string;
  verificationType: string;
  verificationCreaterId: string;
  verificationCreater: string;
  verificationStatus: string;
  verificationCreateDate: string;
  verificationPassDate: string;
  verificationFileList: string;
  verificationRefuse: string;
  verificationRemarks: string;
  jobseekerId: string;
  jobseekerIsVerified: string;
  jobseekerStatus: string;
  jobseekerUsername: string;
  jobseekerName: string;
  userAvatarUrl: string;
  jobseekerGender: string;
  jobseekerBirthdate: string;
  jobseekerEducationLevel: string;
  jobseekerMajor: string;
}

const formState: UnwrapRef<FormState> = reactive({
  verificationId: '',
  verificationType: '',
  verificationCreaterId: '',
  verificationCreater: '',
  verificationStatus: '',
  verificationCreateDate: '',
  verificationPassDate: '',
  verificationFileList: '',
  verificationRefuse: '',
  verificationRemarks: '',
  jobseekerId: '',
  jobseekerIsVerified: '',
  jobseekerStatus: '',
  jobseekerUsername: '',
  jobseekerName: '',
  userAvatarUrl: '',
  jobseekerGender: '',
  jobseekerBirthdate: '',
  jobseekerEducationLevel: '',
  jobseekerMajor: '',
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.verificationId = route.params.verificationId as string;
  getVerificationInfo()
})
//获取公告信息
const getVerificationInfo = async () => {
  await getVerificationDetailAPI({
    verificationId: formState.verificationId
  }).then(res => {
    if (res.data.flag) {
      formState.verificationId = res.data.data.verificationId
      formState.verificationType = res.data.data.verificationType
      formState.verificationCreaterId = res.data.data.verificationCreaterId
      formState.verificationCreater = res.data.data.verificationCreater
      formState.verificationStatus = res.data.data.verificationStatus
      formState.verificationCreateDate = dayjs(res.data.data.verificationCreateDate).format('YYYY-MM-DD')
      formState.verificationPassDate = res.data.data.verificationPassDate
      formState.verificationFileList = res.data.data.verificationFileList
      formState.verificationRefuse = res.data.data.verificationRefuse
      formState.verificationRemarks = res.data.data.verificationRemarks
      formState.jobseekerId = res.data.data.jobseekerId
      formState.jobseekerIsVerified = res.data.data.jobseekerIsVerified
      formState.jobseekerStatus = res.data.data.jobseekerStatus
      formState.jobseekerUsername = res.data.data.jobseekerUsername
      formState.jobseekerName = res.data.data.jobseekerName
      formState.userAvatarUrl = res.data.data.userAvatarUrl
      formState.jobseekerGender = res.data.data.jobseekerGender
      formState.jobseekerBirthdate = dayjs(res.data.data.jobseekerBirthdate).format('YYYY-MM-DD')
      formState.jobseekerEducationLevel = res.data.data.jobseekerEducationLevel
      formState.jobseekerMajor = res.data.data.jobseekerMajor
    }
  })
}
//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}
const userStore = useInfoStore().userInfo;
//审核-通过
const accept = () => {
  updateVerificationAPI({
    verificationId: formState.verificationId,
    verificationStatus: '已通过',
    verificationPassDate: new Date().getTime(),
  }).then(res => {
    if (res.data.flag) {
      message.success('审核成功')
      //修改企业认证状态
      updateJobseekerVerifiedAPI({
        jobseekerId: formState.jobseekerId,
        jobseekerIsVerified: '已认证',
      })
      //发出认证成功的消息
      addNewAPI({
        newCreatorId: userStore.userId,
        newReceiverId: formState.jobseekerId,
        newCreatorName: userStore.userName,
        newCreatorAvatar: userStore.userAvatarUrl,
        newReceiverName: formState.jobseekerUsername,
        newTitle: '学生认证审核通过',
        newText: '您的学生认证已通过审核，失败原因:'+formState.verificationRefuse,
      })
      router.go(-1)
    } else {
      message.error(res.data.message)
    }
  })
};
//审核-不通过
const refuse = () => {
  open.value = true;
};
//审核不通过弹窗
const open = ref<boolean>(false);
const handleOk = async () => {
  if (formState.verificationRefuse === null) {
    message.error('请填写拒绝原因')
    return
  } else {
    updateVerificationAPI({
      verificationId: formState.verificationId,
      verificationStatus: '已拒绝',
      verificationRefuse: formState.verificationRefuse,
    }).then(res => {
      if (res.data.flag) {
        message.success('拒绝成功')
        //修改学生状态
        updateJobseekerVerifiedAPI({
          jobseekerId: formState.jobseekerId,
          jobseekerIsVerified: '未认证',
        })
        //发出认证失败的消息
        addNewAPI({
          newCreatorId: userStore.userId,
          newReceiverId: formState.jobseekerId,
          newCreatorName: userStore.userName,
          newCreatorAvatar: userStore.userAvatarUrl,
          newReceiverName: formState.jobseekerUsername,
          newTitle: '学生认证审核失败了',
          newText: '您的学生认证未通过，请前往个人中心查看',
        })
        getVerificationInfo()
      }
    })
  }
  open.value = false;
};

</script>
<template>
  <div style="display: flex;justify-content: center;align-items: center;height: 100%;width: 100%">

    <div class="verification">
      <div class="top">
        <a-page-header
            sub-title="审核详情表单"
            title="返回"
            @back="() => $router.go(-1)"
        />
      </div>
      <div class="bottom">
        <div class="verification">
          <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">审核-信息</a-divider>
          <a-descriptions :title="formState.verificationType">
            <a-descriptions-item :span="1" label="审核状态">
              {{ formState.verificationStatus }}
            </a-descriptions-item>
            <a-descriptions-item :span="1" label="提交单位">
              {{ formState.verificationCreater }}
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="提交时间">
              {{ formState.verificationCreateDate }}
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="补充信息">
              {{ formState.verificationRemarks }}
            </a-descriptions-item>
            <a-descriptions-item :span="3" label="文件列表">
              <div class="file-list">
                <div v-for="(file, index) in formState.verificationFileList" :key="index">
                  <a :href="'http://localhost:8080/file/download?name='+file" download>{{ file }}</a>
                </div>
              </div>
            </a-descriptions-item>
          </a-descriptions>
          <div v-if="formState.verificationStatus === '待审核'" class="check-button">
            <a-button style="margin-right: 20px" type="primary" @click="accept">审核-通过</a-button>
            <a-button danger style="margin-right: 20px" type="primary" @click="refuse">审核-不通过</a-button>

            <!--          不通过弹窗-->
            <div>
              <a-modal v-model:open="open"
                       :title="formState.verificationCreater+'-审核-不通过原因'"
                       cancelText="取消"
                       okText="确认拒绝"
                       @ok="handleOk">
                <div style="width: 400px">
                  <a-form
                      ref="formRefVerification"
                      :model="formState"
                  >
                    <a-form-item>
                      <a-textarea v-model:value="formState.verificationRefuse"
                                  :auto-size="{minRows: 5, maxRows: 10}"
                                  :maxlength="500"
                                  show-count
                                  style="width: 400px"/>
                    </a-form-item>

                  </a-form>
                </div>
              </a-modal>
            </div>

          </div>
        </div>


        <div class="verification">
          <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">学生-信息</a-divider>
          <a-badge-ribbon :color="Color(formState.jobseekerIsVerified)" :text="formState.jobseekerIsVerified">
            <div style="display: flex;padding-top: 30px">
              <div>
                <a-descriptions :title="formState.jobseekerUsername">
                  <a-descriptions-item :span="1" label="用户昵称">
                    {{ formState.jobseekerUsername }}
                  </a-descriptions-item>
                  <a-descriptions-item :span="1" label="真实姓名">
                    {{ formState.jobseekerName }}
                  </a-descriptions-item>
                  <a-descriptions-item :span="1" label="用户性别">
                    {{ formState.jobseekerGender }}
                  </a-descriptions-item>
                  <a-descriptions-item :span="3" label="用户生日">
                    {{ formState.jobseekerBirthdate }}
                  </a-descriptions-item>
                  <a-descriptions-item :span="3" label="用户学历">
                    {{ formState.jobseekerEducationLevel }}
                  </a-descriptions-item>
                  <a-descriptions-item :span="3" label="用户专业">
                    {{ formState.jobseekerMajor }}
                  </a-descriptions-item>
                </a-descriptions>
              </div>
              <div>
                <a-avatar
                    :size="150"
                    :src="'http://localhost:8080/image/download?name=' + formState.userAvatarUrl"
                />
              </div>
            </div>
          </a-badge-ribbon>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.verification {
  width: 80%;
  height: 100%;
  background-color: #FFFFFF;
  overflow: auto; /* 内容超出时自动显示滚动条 */

  .bottom {
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 100%;
    padding-right: 50px;
    padding-left: 50px;

    .verification {
      border-radius: 20px;
      padding: 10px 50px 50px;
      border: 1px solid #ccc;
      width: auto;
      height: auto;
      margin-bottom: 10px;

      .file-list {
        display: flex;
        flex-direction: column; /* 设置为垂直方向排列 */
        gap: 8px; /* 设置元素之间的间距 */
      }

      .check-button {
        border: 2px solid #ccc;
        padding: 25px;
        border-radius: 20px;
        display: flex;
        float: right;
      }
    }
  }

}
</style>
